<!DOCTYPE html>
<html>
    <head>
        <title>AGM客服列表</title>
        <link rel="stylesheet" href="/static/weui.min.css">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .page, body{background-color: #fbf9fe}
            .page_title{color:#225fba}
            .hd{text-align:center}
            .weui_label{width:4em;}
            .bd{padding-bottom:30px;}
            .weui_cell_hd img{height: 40px;}
            .weui_cell_hd {
                white-space: nowrap;
                overflow: auto;
            }            
            .iconMenuBadge {
                position: absolute;
                top: 2px;
                left: 2px;
            }
            .buttonBadge {
                position: absolute;
                top: -9px;
                left: -15px;
            }
            .badge {
              background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -o-radial-gradient( 5px -9px, circle, white 8%, red 26px );
                background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px );
              background-color: red;
              border: 2px solid white;
              border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
              box-shadow: 1px 1px 1px black;
              color: white;
              font: bold 15px/13px Helvetica, Verdana, Tahoma;
              height: 16px; 
              padding: 4px 3px 0 3px;
              text-align: center;
              min-width: 14px;
            }
            .nav_right{position: absolute;right: 5px;width: 35px;top: 5px;}
            .weui_actionsheet_menu a .weui_actionsheet_cell{color:initial;border-top: 1px solid #d9d9d9;}  
        </style>
    </head>
    <body>
        <div id='wx_logo' style="display:none;"><img src="/static/images/wx_logo.jpg"/></div>
        <div class="hd">
            <h2 class="page_title">AGM客服列表</h2> 
            <img src="/static/images/icon_nav_cell.png" class="nav_right"> 
        </div>
        <div class="bd">
            <div class="weui_cells weui_cells_form">
                {% for kf in kfs %}
                <div class="weui_cell weui_cell_switch">
                    <div class="weui_cell_hd"><img src="{{ kf.get('headimgurl') or '/static/images/getheadimg.png' }}"></div>
                    <div class="weui_cell_hd weui_cell_primary">{{ kf.get('nickname') }}</div>
                    <div class="weui_cell_ft">
                        <input class="weui_switch" kfid={{kf.id}} type="checkbox"{% if kf.get('accept') == 1 %} checked{% endif %}>
                    </div>
                </div>
                {% endfor %}               
            </div>
        </div>  
        <div id="actionSheet_wrap" style="display: none;">
            <div class="weui_mask_transition" id="mask" style="display: none;"></div>
            <div class="weui_actionsheet" id="weui_actionsheet">
                <div class="weui_actionsheet_menu">
                    <a href="kflist"><div class="weui_actionsheet_cell">AGM客服列表</div></a>
                    <a href="kflink"><div class="weui_actionsheet_cell">AGM客服关联</div></a>
                </div>
                <div class="weui_actionsheet_action">
                    <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
                </div>
            </div>
        </div>        
    </body>
    <script>
        $('input').click(function(){
            var self = $(this), value = this.checked
            $.post('?kfid='+self.attr('kfid')+'&check='+value, function(data){
                if(data!='success'){
                    self[0].checked = !value
                    console.info(data)
                }
            }).fail(function(data){
                    self[0].checked = !value               
            })
        })
        $('.nav_right').click(function(){
            $('#actionSheet_wrap').show()
            var mask = $('#mask');
            var weuiActionsheet = $('#weui_actionsheet');
            weuiActionsheet.addClass('weui_actionsheet_toggle');
            mask.show().addClass('weui_fade_toggle').one('click', function () {
                hideActionSheet(weuiActionsheet, mask);
            });
            $('#actionsheet_cancel').one('click', function () {
                hideActionSheet(weuiActionsheet, mask);
            });
            weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');

            function hideActionSheet(weuiActionsheet, mask) {
                weuiActionsheet.removeClass('weui_actionsheet_toggle');
                mask.removeClass('weui_fade_toggle');
                weuiActionsheet.on('transitionend', function () {
                    mask.hide();
                    $('#actionSheet_wrap').css('display', 'none')
                }).on('webkitTransitionEnd', function () {
                    mask.hide();
                    $('#actionSheet_wrap').css('display', 'none')
                })
            }
        })        
    </script>
<html>